<template>
  <view class="head flex flex-row fs_0">
    <image :src="detail.coverUrl" class="fs_0 img_bg" />
    <view class="info flex flex-column f_1">
      <view class="title line-1">{{ detail.practiceName ? detail.practiceName : '暂无标题' }}</view>
      <!--每日练习头部-->
      <view class="statistics flex flex-row between" v-if="type === 'view'">
        <view class="item flex flex-column">
          <text>{{ detail.itemNum ? detail.itemNum : 0 }}</text>
          <label>试题数量</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.passScore ? detail.passScore : 0 }}</text>
          <label>及格分</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.scoreTotal ? detail.scoreTotal : 0 }}</text>
          <label>总分</label>
        </view>
      </view>
      <!--练习设置头部-->
      <view class="statistics flex flex-row between" v-if="type === 'settings'">
        <view class="item flex flex-column">
          <text>{{ detail.itemNum ? detail.itemNum : 0 }}</text>
          <label>题量</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.scoreTotal ? detail.scoreTotal : 0 }}</text>
          <label>总分</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.time ? detail.time : 0 }}</text>
          <label>时长（分钟）</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ detail.studentNum ? detail.studentNum : 0 }}</text>
          <label>练习人数</label>
        </view>
      </view>
      <!--统计头部-->
      <view class="statistics flex flex-row between" v-if="type === 'statistics'">
        <view class="item flex flex-column">
          <text>{{ detail.num ? detail.num : 0 }}</text>
          <label>练习人数</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ average }}</text>
          <label>平均分</label>
        </view>
        <view class="item flex flex-column">
          <text>{{ averageDuration }}</text>
          <label>平均用时</label>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { formatTime } from '@/utils/PrjUtils'; 
export default {
  name: "EveryDayHead",
  props: {
    detail: {
      type: Object,
    },
    type: {
      default: "view", // view：练习详情 settings:练习设置页   statistics：统计页
      type: String
    }
  },
  computed: {
    average() {
      return parseFloat(this.detail.score) ?? 0
    },
    averageDuration() {
      return this.detail.time <= 0 || !this.detail.time ? '00:00:00' : formatTime(this.detail.time)
    },
    sumData() {
      let sumNum = 0;
      let sumScore = 0;
      if (this.detail && this.detail.abilityExQuestion) {
        const list = JSON.parse(this.detail.abilityExQuestion);
        list.forEach(item => {
          sumNum += parseInt(item.cnt);
          sumScore += parseInt(item.cnt) * parseFloat(item.score);
        });
      }

      return { sumNum, sumScore };
    }
  },
}
</script>
<style scoped lang="scss">
.head {
  padding: 13px 19px 28px 19px;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  background-color: #FFFFFF;

  image {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background-size: cover;
  }

  .info {
    margin-left: 23px;

    .title {
      font-size: 32rpx;
      color: #333333;
    }
  }

  .statistics {
    margin-top: 14px;

    .item {
      &+.item {
        // margin-left: 30px;
      }

      text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
      }

      label {
        font-size: 24rpx;
        color: #666666;
        margin-top: 8px;
      }
    }
  }
}
</style>